<template>
  <div class="selectInput">
    <el-select class="flavorSelect" v-model="value" placeholder="请选择口味" size="large" style="width: 160px" @change="checkOption(value)">
      <el-option v-for="item in leftDishFlavors" :key="item.name" :label="item.name" :value="item.name" />
    </el-select>
    <!-- <el-input v-model="props.value" type="text" style="width: 100%" placeholder="请选择口味" clearable readonly
      @focus="selectFlavor(true)" @blur="outSelect(false)" /> -->
    <!-- <div v-if="props.leftDishFlavors.length" class="flavorSelect">
      <span v-for="(item, index) in props.leftDishFlavors" :key="index" class="items" @click="checkOption(item)">{{
        item.name
      }}</span>
      <span v-if="props.leftDishFlavors.length === 0" class="none">无数据</span>
    </div> -->
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const props = defineProps<{
  leftDishFlavors: any
  index: number
}>()
const value = ref('')

const emits = defineEmits(['select'])

const checkOption = (value: string) => {
  emits('select', value, props.index)
}

</script>

<style lang="scss" scoped>
.selectInput {
  position: relative;
  width: 100%;
  min-width: 100px;

  .flavorSelect {
    text-align: center;
    background: #fff;

    .items {
      cursor: pointer;
      display: inline-block;
      width: 100%;
      line-height: 35px;
      border-bottom: solid 1px #f4f4f4;
      color: #666;
      margin: 0 !important;

      &:hover {
        background-color: #fffbf0;
      }

      &:active {
        background-color: #fffbf0;
        color: #ffc200;
      }
    }

    .none {
      font-size: 14px;
    }
  }
}
</style>
